import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from "vue"

export default function useScroll() {
    const isReachBottom = ref(false)
    const scrollTop = ref(0)
    const scrollHeight = ref(0)
    const clientHeight = ref(0)

    const scrollListenerHandler = () => {
        scrollTop.value = document.documentElement.scrollTop
        scrollHeight.value = document.documentElement.scrollHeight
        clientHeight.value = document.documentElement.clientHeight
        if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
            console.log("到底部了");
            isReachBottom.value = true
        }
    }

    onMounted(() => {
        window.addEventListener("scroll", scrollListenerHandler)
    })
    onUnmounted(() => {
        window.removeEventListener("scroll", scrollListenerHandler)
    })
    onActivated(() => {
        window.addEventListener("scroll", scrollListenerHandler)
    })
    onDeactivated(() => {
        window.removeEventListener("scroll", scrollListenerHandler)
    })

    return { isReachBottom, scrollTop, scrollHeight, clientHeight }

}

